<template>
  <div class="home">
    <bread-crumb title="演出管理"></bread-crumb>
    <div class="new_row">
      <el-button type="primary" @click="addShowArea">添加演出</el-button>
    </div>
    <el-table :data="datas" border stripe>
      <el-table-column align="center" prop="show_id" label="演出编号" width="100px"></el-table-column>
      <el-table-column align="center" prop="add.area_name" label="场地" width="100px"></el-table-column>
      <el-table-column align="center" prop="msc.msc_name" label="音乐人" width="100px"></el-table-column>
      <el-table-column align="center" prop="tag.tag_name" label="风格" width="100px"></el-table-column>
      <el-table-column align="center" prop="show_name" label="演出名" width="250px"></el-table-column>
      <el-table-column align="center" prop="show_date" label="演出时间" width="250px"></el-table-column>
      <el-table-column align="center" prop="show_img" label="演出图片" width="100px">
        <template slot-scope='scope'>
          <img v-show="scope.row.show_img" :src="scope.row.show_img" width="50px" height="50px" style="border-radius: 50%;">
        </template>
      </el-table-column>
      <el-table-column
            fixed="right"
            label="操作"
            width="250">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="primary" size="small">详情</el-button>
              <el-button @click="editRow(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button @click="delRow(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRows">
     </el-pagination>
     <el-dialog title="删除提醒" :visible.sync="is_show" @close="is_show=false">
       <span class="text-danger">{{ del_msg }}</span>
       <div slot="footer">
         <el-button @click="is_show=false">取消</el-button>
         <el-button @click="delData" type="danger">确定</el-button>
       </div>
     </el-dialog>
     <el-dialog :title="editOrAddTitle" :visible.sync="edit_is_show" @close="editForm = {}">
       <el-form :model="editForm" class="editForm">
         <el-form-item label="场地">
             <el-autocomplete
               class="inline-input"
               v-model="state1"
               :fetch-suggestions="querySearch_area"
               placeholder="请输入内容"
               @select="handleSelect_area"
             ></el-autocomplete>
         </el-form-item>
         <el-form-item label="音乐人">
           <el-autocomplete
             class="inline-input"
             v-model="state2"
             :fetch-suggestions="querySearch_music"
             placeholder="请输入内容"
             @select="handleSelect_music"
           ></el-autocomplete>
         </el-form-item>
         <el-form-item label="风格">
             <el-autocomplete
               class="inline-input"
               v-model="state3"
               :fetch-suggestions="querySearch_tag"
               placeholder="请输入内容"
               @select="handleSelect_tag"
             ></el-autocomplete>
         </el-form-item>
         <el-form-item label="演出名">
           <el-input v-model="editForm.show_name"></el-input>
         </el-form-item>
         <el-form-item label="演出价格">
           <el-input v-model="editForm.show_price"></el-input>
         </el-form-item>
         <el-form-item label="演出介绍">
           <el-input type="textarea" v-model="editForm.show_details"></el-input>
         </el-form-item>
         <el-form-item label="演出地址">
           <el-input v-model="editForm.show_periphery"></el-input>
         </el-form-item>
         <el-form-item label="演出图片">
           <el-input v-model="editForm.show_img"></el-input>
         </el-form-item>
         <el-form-item label="演出日期">
           <el-input v-model="editForm.show_date"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button @click="edit_is_show=false">取消</el-button>
         <el-button @click="saveForm" type="primary">确定</el-button>
       </div>
     </el-dialog>
     <el-dialog title="演出详情" :visible.sync="view_is_show" @close="view_is_show=false">
       <template>
         <el-tabs :tab-position="tabPosition" style="height: 800px">
           <el-tab-pane label="演出信息">
             <span>演出： {{ viewData.show_id }}</span>
             <el-divider></el-divider>
             <span>场地： {{ area_name }}</span>
             <el-divider></el-divider>
             <span>音乐人： {{ msc_name }}</span>
             <el-divider></el-divider>
             <span>风格： {{ tag_name }}</span>
             <el-divider></el-divider>
             <span>演出图片：
              <el-image
                 style="width: 100px; height: 100px"
                 :src="viewData.show_img"
                 :preview-src-list="srcList">
               </el-image>
             </span>
             <el-divider></el-divider>
             <span>演出名： {{ viewData.show_name }}</span>
             <el-divider></el-divider>
             <span>演出价格： {{ viewData.show_price }}</span>
             <el-divider></el-divider>
           </el-tab-pane>
           <el-tab-pane label="演出日期和地点">
             <span>演出地点： {{ viewData.show_periphery }}</span>
             <el-divider></el-divider>
             <span>演出时间： {{ viewData.show_date }}</span>
             <el-divider></el-divider>
           </el-tab-pane>
           <el-tab-pane label="演出介绍">
             <p>&nbsp;&nbsp; {{ viewData.show_details }}</p>
           </el-tab-pane>
         </el-tabs>
       </template>
     </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      datas: [],
      currentPage: 1,
      pageSize: 10,
      totalRows: 0,
      is_show: false,
      view_is_show: false,
      del_msg: '是否删除',
      del_item: {},
      editOrAddTitle: '修改数据',
      edit_is_show: false,
      editForm: {},
      editData: {},
      viewData: {},
      disabled: false,
      tabPosition: 'left',
      srcList: [],
      restaurants_music: [],
      restaurants_area: [],
      restaurants_tag: [],
      state1: '',
      state2: '',
      state3: '',
      msc_name: '',
      area_name: '',
      tag_name: ''
    }
  },
  methods: {
    load_music () {
      this.$http.get('/show/all_music/').then(resp => {
        for (const i in resp.data) {
          this.restaurants_music.push({ value: resp.data[i].msc_name, data: resp.data[i] })
        }
      })
    },
    load_area () {
      this.$http.get('/show/all_area/').then(resp => {
        for (const i in resp.data) {
          this.restaurants_area.push({ value: resp.data[i].area_name, data: resp.data[i] })
        }
      })
    },
    load_tag () {
      this.$http.get('/show/tag/').then(resp => {
        for (const i in resp.data) {
          this.restaurants_tag.push({ value: resp.data[i].tag_name, data: resp.data[i] })
        }
      })
    },
    loadData () {
      this.$http.get('/adminapi/shows/?page=' + this.currentPage + '&page_size=' + this.pageSize).then(resp => {
        const { results, count } = resp.data
        this.datas = results
        this.totalRows = count
      })
    },
    querySearch_music (queryString, cb) {
      var restaurants_music = this.restaurants_music
      var results = queryString ? restaurants_music.filter(this.createFilter(queryString)) : restaurants_music
      cb(results)
    },
    querySearch_area (queryString, cb) {
      var restaurants_area = this.restaurants_area
      var results = queryString ? restaurants_area.filter(this.createFilter(queryString)) : restaurants_area
      cb(results)
    },
    querySearch_tag (queryString, cb) {
      var restaurants_tag = this.restaurants_tag
      var results = queryString ? restaurants_tag.filter(this.createFilter(queryString)) : restaurants_tag
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        console.info(restaurant)
        return (restaurant.value.indexOf(queryString) === 0)
      }
    },
    handleSelect_music (item) {
      console.log(item)
    },
    handleSelect_area (item) {
      console.log(item)
    },
    handleSelect_tag (item) {
      console.log(item)
    },
    addShowArea () {
      this.editForm.title = '新增演出'
      this.edit_is_show = true
      this.disabled = false
    },
    viewRow (item) {
      this.viewData = item
      console.info(item)
      this.area_name = item.add.area_name
      this.msc_name = item.msc.msc_name
      this.tag_name = item.tag.tag_name
      this.view_is_show = true
      this.srcList = [item.area_img]
    },
    editRow (editData) {
      this.edit_is_show = true
      this.disabled = true
      // 初始显示的数据
      this.editForm = {
        show: editData.show,
        add: editData.add,
        msc: editData.msc,
        tag: editData.tag,
        show_name: editData.show_name,
        show_price: editData.show_price,
        show_periphery: editData.show_periphery,
        show_img: editData.show_img,
        show_details: editData.show_details,
        show_date: editData.show_date
      }
    },
    saveForm () {
      if (this.disabled) {
        const { showId } = this.editForm
        // 删除对象的属性(不修改的)
        delete this.editForm.show
        this.$http.patch('/adminapi/shows/' + showId + '/', this.editForm).then(resp => {
          console.info(resp.data)
          this.edit_is_show = false
          this.loadData()
          this.editForm = {} // 清空之前绑定的数据
        })
      } else {
        this.$http.post('/adminapi/shows/', this.editForm).then(resp => {
          console.info(resp.data)
          this.edit_is_show = false
          this.loadData()
        })
      }
    },
    delRow (item) {
      this.del_item = item
      this.is_show = true
      this.del_msg = '亲，真的忍心删除' + item.area_name + '吗？'
    },
    delData () {
      this.$http.delete('/adminapi/shows/' + this.del_item.show + '/').then(resp => {
        console.info(resp.data)
        this.loadData() // 刷新页面数据，重新装载数据
        this.$message.success('数据删除成功')
        this.is_show = false
      })
    },
    handleSizeChange (size) {
      console.info(size)
      this.currentPage = 1
      this.pageSize = size
      this.loadData()
    },
    handleCurrentChange (page) {
      console.info(page)
      this.currentPage = page
      this.loadData()
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  },
  mounted () {
    this.loadData()
    this.load_music()
    this.load_area()
    this.load_tag()
  }
}
</script>

<style>
.editForm{
  width: auto;
  height: auto;
}
.el-dialog__body{
  height: 600px;
  overflow: auto;
}
.el-dialog{
  width: 80%;
}
.el-form-item{
  margin: 0px;
}
</style>
